<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta content="App Inventor for Android" name="description">
    <meta content="Android, Blocks App Inventor, Mobile, Phone, IDE" name="keywords">
    <title>
      Quiz Me - App Inventor para Android
    </title>
    <link href="../../../static/images/appinventor-16.png" rel="SHORTCUT ICON" type="image/ico">
    <link href="../../../static/images/appinventor-16.png" rel="icon" type="image/png">
    <link href="../../../static/css/appinventor.css" rel="stylesheet" type="text/css">
<!-- ADD Google Analytics here -->
<!-- END Google Analytics here -->
    <style type="text/css">
img.c2 {border-width:0}
    div.c1 {clear:both;}
    </style>
  </head>
  <body>
    <div id="aiac">
      <div class="main-container">
        <div class="header">
          <div class="header-title">
            <a href="../../../about/index.html"><img alt="" src="../../../static/images/appinventor_logo.gif"></a>
          </div>
            <div class="header-search">
<!-- ADD Google Custom Search -->
<!-- END Google Custom Search -->
              <div class="header-search-query">
              </div>
              <div class="header-search-button">
              </div>
            </div>
          <div class="header-login">
            <div class="header-login-greeting">
              Aprende acerca de App Inventor
            </div>
          </div>
        </div>
        <div class="customhr customhr-green"></div>
<!-- ADD Google Search Results -->
<div id="cse" style="width:100%;height:0;"></div>
<!-- END Google Search Results -->
        <div id="navigation">
          <div id="navigation-links">
            <div class="navigation-link-option" id="navigation-link-home">
              <a href="../../../about/index.html">Acerca de</a>
            </div>
            <div class="navigation-link-option navigation-link-active" id="navigation-link-learn">
              <a href="../../../learn/index.html">Aprende</a>
            </div>
            <div class="navigation-link-option" id="navigation-link-forum">
              <a href="../../../forum/index.html">Foro</a>
            </div>
            <div class="navigation-link-option" id="navigation-link-myappinventor">
              <a href="">Mis Proyectos</a><div>(próximamente)</div>
            </div>
          </div>
          <div id="navigation-breadcrumb">
            <a href="../../../learn/index.html">Aprende</a> &gt; <a href="../../../learn/tutorials/index.html">Tutoriales</a> &gt; Quiz Me &gt;
          </div>
          <div class="c1"></div>
        </div>
        <div class="customhr customhr-gray"></div>
        <div class="content">
          <div class="content-body">
            <div class="learn-page">
              <h1>
                Quiz Me
              </h1>
              <h2>
                Que estas construyendo
              </h2>
              <div class="imagecontainer">
                <img align="right" alt="" height="453" src="QuizMeAssets/quizOnEmulator.png" width="197">
              </div>
              <p>
                QuizMe es un juego de preguntas sobre béisbol, pero se puede usar como plantilla para construir cuestionarios sobre cualquier tema. Con QuizMe:

              </p>
              <ul>
                <li>El usuario responde paso a paso a una serie de preguntas, haciendo clic en un botón para pasar a la siguiente pregunta.
                </li>
                <li>El usuario introduce una respuesta para cada pregunta y la aplicación informa si cada respuesta es correcta o no.
                </li>
              </ul>
              <p>
                Con QuizMe, las pregunta del cuestionario son siempre las mismas a menos que tú, el programador, las cámbies. Más tarde, puedes crear <a href="../../../learn/tutorials/makequiztakequiz/makequiztakequiz.html">MakeQuiz</a>, una aplicación que permite a los usuarios de la aplicación crear y modificar las preguntas del cuestionario.
              </p>
              <p>
                En este tutorial se supone que ya estás familiarizado con los conceptos básicos de  App Inventor - utilizar el Diseñador de componentes para construir una interfaz de usuario, y utilizar el Editor de bloques para especificar los controladores de eventos. Si no estás familiarizado con los conceptos básicos, trata de realizar algunos de lo <a href="../../../learn/tutorials/index.html">tutoriales básicos</a> antes de continuar.
              </p>
              <h2>
                Primeros pasos
              </h2>
              <p>
                Conectate a la página web de App Inventor y empieza un nuevo proyecto. Nombralo QuizMe, y también establece el <span class="ButtonText">Título</span> de la pantalla como QuizMe. Abre el Editor de bloques y conectalo con el teléfono.
              </p>
              <p>
                Descarga también estas fotos de jugadores de béisbol y guardarlas en tu ordenador: <a href="QuizMeAssets/Larsenberra.jpg">Larsenberra.jpg</a>, <a href="QuizMeAssets/dallasbraden.jpg">dallasbraden.jpg</a>, <a href="QuizMeAssets/cyyoung.jpg">cyyoung.jpg</a>, <a href="QuizMeAssets/nolanryan.jpg">nolanryan.jpg</a>. Más tarde, vas a cargar estas imágenes en tu proyecto.
              </p>
              <h2>
                Introducción
              </h2>
              <p>
                Vas a diseñar un juego de preguntas para que el usuario pase de una pregunta a otra haciendo clic en el botón Siguiente, y reciba una sencilla retroalimentación correcto/incorrecto en cada respuesta.
              </p>
              <p>
                Este tutorial presenta:
              </p>
              <ul>
                <li>Definición y visualización de listas de información
                </li>
                <li>La secuenciación a través de una lista que utiliza una variable de índice - una variable que sigue la pista de una posición en una lista.
                </li>
                <li>Comportamientos condicionales - llevar a cabo determinadas operaciones sólo cuando se cumple una condición.
                </li>
                <li>Cambio de una imagen para mostrar una imagen diferente en distintos momentos.
                </li>
              </ul>
              <h2>
                Configuración de los componentes
              </h2>
              <p>
                Utiliza el diseñador de componentes para crear la interfaz de QuizMe. Cuando hayas terminado, debe ser parecida a la figura de abajo (también hay instrucciones más detalladas por debajo de la imagen).
              </p>
              <div class="imagecontainer">
                <img alt="" height="515" src="QuizMeAssets/designer.png" width="950">
              </div>
              <p>
                Para crear esta interfaz, primero carga las imágenes que has descargado en el proyecto. Haz clic en el botón <span class="ButtonText">Add</span> en el área de <span class="ButtonText">Media</span> y selecciona uno de los archivos descargados (por ejemplo, <span class="ButtonText">Larsenberra.jpg</span>). Luego haz lo mismo con las otras tres imágenes.

              </p>
              <p>
                A continuación, crea los siguientes componentes arrastrandolos desde la <span class="ButtonText">Paleta</span> al <span class="ButtonText">Visor</span>.
              </p>
              <div class="advtutorial">
                <table>
                  <tbody>
                    <tr>
                      <td class="tbl-header">
                        Tipo de componente
                      </td>
                      <td class="tbl-header">
                        Grupo de la paleta
                      </td>
                      <td class="tbl-header">
                        Como lo llamarás
                      </td>
                      <td class="tbl-header">
                        Propósito del componente
                      </td>
                    </tr>
                    <tr>
                      <td>
                         <span class="ButtonText">Image</span>
                      </td>
                      <td>
                        Basic
                      </td>
                      <td>
                         <span class="ButtonText">Image1</span>
                      </td>
                      <td>
                         La imagen parte de la pregunta
                      </td>
                    </tr>
                    <tr>
                      <td>
                         <span class="ButtonText">Label</span>
                      </td>
                      <td>
                        Basic
                      </td>
                      <td>
                         <span class="ButtonText">QuestionLabel</span>
                      </td>
                      <td>
                         Muestra la pregunta actual
                      </td>
                    </tr>
                    <tr>
                      <td>
                         <span class="ButtonText">HorizontalArrangement</span>
                      </td>
                      <td>
                        Screen Arrangement
                      </td>
                      <td>
                         <span class="ButtonText">HorizontalArrangement1</span>
                      </td>
                      <td>
                         Organiza la etiqueta y cajón de texto
                      </td>
                    </tr>
                    <tr>
                      <td>
                         <span class="ButtonText">Label</span>
                      </td>
                      <td>
                        Basic
                      </td>
                      <td>
                         <span class="ButtonText">AnswerPromptLabel</span>
                      </td>
                      <td>
                         Texto para el cajón de respuesta
                      </td>
                    </tr>
                    <tr>
                      <td>
                         <span class="ButtonText">TextBox</span>
                      </td>
                      <td>
                        Basic
                      </td>
                      <td>
                         <span class="ButtonText">AnswerText</span>
                      </td>
                      <td>
                         El usuario introduce su respuesta aquí.
                      </td>
                    </tr>
                    <tr>
                      <td>
                         <span class="ButtonText">Label</span>
                      </td>
                      <td>
                        Basic
                      </td>
                      <td>
                        <span class="ButtonText">RightWrongLabel</span>
                      </td>
                      <td>
                        Correcto/Incorrecto se muestra aquí.
                      </td>
                    </tr>
                    <tr>
                      <td>
                         <span class="ButtonText">HorizontalArrangement</span>
                      </td>
                      <td>
                        Screen Arrangement
                      </td>
                      <td>
                         <span class="ButtonText">HorizontalArrangement2</span>
                      </td>
                      <td>
                         Organiza el AnswerButton y nextButton
                      </td>
                    </tr>
                    <tr>
                      <td>
                         <span class="ButtonText">Button</span>
                      </td>
                      <td>
                        Basic
                      </td>
                      <td>
                         <span class="ButtonText">AnswerButton</span>
                      </td>
                      <td>
                         Donde el usuario hace clic para enviar una respuesta
                      </td>
                    </tr>
                    <tr>
                      <td>
                         <span class="ButtonText">Button</span>
                      </td>
                      <td>
                        Basic
                      </td>
                      <td>
                         <span class="ButtonText">NextButton</span>
                      </td>
                      <td>
                         Donde el usuario hace clic para pasar a la siguiente respuesta
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <p>
                Establece las propiedades de los componentes que se describen a continuación:
              </p>
              <div class="advtutorial">
                <table>
                  <tbody>
                    <tr>
                      <td class="tbl-header">
                        Componente
                      </td>
                      <td class="tbl-header">
                        Acción
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">Image1</span>
                      </td>
                      <td>
                        Establece su propiedad <span class="ButtonText">Picture</span> a <span class="ButtonText">Larsenberra.jpg</span>. Esta es la primera imagen que debe aparecer.
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">QuestionLabel</span>
                      </td>
                      <td>
                        Cambia su propiedad <span class="ButtonText">Text</span> a "question"
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">AnswerPromptLabel</span>
                      </td>
                      <td>
                        Cambia su propiedad <span class="ButtonText">Text</span> a "Enter Answer:". En la pantalla <span class="ButtonText">Viewer</span> (visor). Mueve el botón dentro de <span class="ButtonText">HorizontalArrangement1</span>.
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">AnswerText</span>
                      </td>
                      <td>
                        Cambia su propiedad <span class="ButtonText">Hint</span> a "please enter an answer". En el <span class="ButtonText">Visor</span>, mueve <span class="ButtonText">AnswerText</span> dentro de <span class="ButtonText">HorizontalArrangement1</span>.
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">AnswerButton</span>
                      </td>
                      <td>
                        Cambia su propiedad <span class="ButtonText">Text</span> a "Submit". En el <span class="ButtonText">Visor</span>, mueve el botón dentro de <span class="ButtonText">HorizontalArrangment2.</span>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">NextButton</span>
                      </td>
                      <td>
                        Cambia su propiedad <span class="ButtonText">Text</span> a "Next". Mueve el botón dentro de <span class="ButtonText">HorizontalArrangement2</span>.
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">RightWrongLabel</span>
                      </td>
                      <td>
                        Cambia su propiedad <span class="ButtonText">Text</span> a "correct/incorrect "
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <h2>
                Añadir comportamientos a los componentes
              </h2>
              <p>
                Abre el Editor de bloques para agregar los comportamientos de la aplicación. En primer lugar, vamos a definir dos variables de lista, <span class="ButtonText">QuestionList</span> para mantener la lista de preguntas, y <span class="ButtonText">AnswerList</span> para mantener la lista de respuestas correspondientes.
              </p>
              <p>
                Para definir las dos variables de lista, necesitarás los siguientes bloques:
              </p>
              <div class="advtutorial">
                <table>
                  <tbody>
                    <tr>
                      <td class="tbl-header">
                        Tipo de bloque
                      </td>
                      <td class="tbl-header">
                        Cajón
                      </td>
                      <td class="tbl-header">
                        Propósito
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">def variable</span>
                      </td>
                      <td>
                        Definitions
                      </td>
                      <td>
                        Define la variable <span class="ButtonText">QuestionList</span> (cámbiale el nombre)
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">def variable</span>
                      </td>
                      <td>
                        Definitions
                      </td>
                      <td>
                        Define la variable <span class="ButtonText">AnswerList</span> (cámbiale el nombre)
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">make a list</span>
                      </td>
                      <td>
                        Lists
                      </td>
                      <td>
                        Utilizada para insertar los elementos de <span class="ButtonText">QuestionList</span>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">text</span> (3 de ellos)
                      </td>
                      <td>
                        Text
                      </td>
                      <td>
                        las preguntas actuales
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">make a list</span>
                      </td>
                      <td>
                        Lists
                      </td>
                      <td>
                        Utilizada para insertar los elementos de <span class="ButtonText">AnswerList</span>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">text</span> (3 de ellos)
                      </td>
                      <td>
                        Text
                      </td>
                      <td>
                        las respuestas actuales
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <p>
                Para crear variables globales arrastra un bloque definición de variable del cajón  <span class="ButtonText">Definitions</span> y haz doble clic en el nombre por defecto "variable" para cambiarle el nombre. El bloque <span class="ButtonText">def variable</span> tiene una ranura para el valor inicial de la variable. Si la variable representa un número o texto, haga clic en el triángulo del <span class="ButtonText">bloque rojo?</span> y elige el tipo que desees. Si la variable representa una lista, arrastra <span class="ButtonText">bloque rojo?</span> a la papelera, ve al cajón <span class="ButtonText">Lists</span>, y conecta un bloque <span class="ButtonText">make a list</span> en la definición de la variable.
              </p>
              <p>
                Los bloques deben tener el siguiente aspecto:
              </p>
              <div class="imagecontainer">
                <img alt="" height="143" src="QuizMeAssets/questionlist.png" width="668">
              </div>
              <div class="imagecontainer">
                <img alt="" height="135" src="QuizMeAssets/AnswerList.png" width="424">
              </div>
              <h2>
                Define la variable oculta de Índice
              </h2>
              <p>
                Cada vez que el usuario hace clic en el <span class="ButtonText">NextButton</span> para proceder a través del cuestionario, la aplicación tiene que recordar la pregunta en que se encuentra. En programación, para recordar algo, se define una nueva variable. En este caso, la aplicación tiene que recordar el número de pregunta en curso - el índice en la lista <span class="ButtonText">QuestionList</span>.
              </p>
              <p>
                Para crear la variable <span class="ButtonText">currentQuestionIndex</span>, necesitarás los siguientes bloques:
              </p>
              <div class="advtutorial">
                <table>
                  <tbody>
                    <tr>
                      <td class="tbl-header">
                        Tipo de bloque
                      </td>
                      <td class="tbl-header">
                        Cajón
                      </td>
                      <td class="tbl-header">
                        Propósito
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">def variable</span>
                      </td>
                      <td>
                        Definitions
                      </td>
                      <td>
                        Define la variable <span class="ButtonText">currentQuestionIndex</span> (cámbiale el nombre)
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">number</span> (1)
                      </td>
                      <td>
                        Math
                      </td>
                      <td>
                        Establecer el valor inicial de <span class="ButtonText">currentQuestionIndex</span> a 1
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <p>
                Los bloques deben tener el siguiente aspecto:
              </p>
              <div class="imagecontainer">
                <img alt="" height="51" src="QuizMeAssets/index.png" width="282">
              </div>
              <h2>
                Mostrar la primera pregunta
              </h2>
              <p>
                Para empezar, haz caso omiso de las respuestas y simplemente trabaja en el comportamiento de la secuencia para las preguntas. El comportamiento deseado es el siguiente: cuando la aplicación se inicia, la primera pregunta debería aparecer en la etiqueta con el nombre <span class="ButtonText">QuestionLabel</span>. Cuando el usuario hace clic en <span class="ButtonText">NextButton</span>, la segunda pregunta debe aparecer. Cuando el usuario hace clic una vez más, la tercera debe aparecer. Cuando se alcanza la última pregunta, haciendo clic en <span class="ButtonText">NextButton</span> debe dar lugar a la primera pregunta, que una vez más debe aparecer en <span class="ButtonText">QuestionLabel</span>.
              </p>
              <blockquote class="notice">
                <p>
                  Con App Inventor, se seleccionan los elementos particulares de una lista con el bloque <span class="ButtonText">select list item</span>. El bloque pide que especifiques la lista y un índice - una posición en la lista. Si una lista tiene tres elementos, los índices 1,2, y 3 son válidos.
                </p>
              </blockquote>
              <p>
                Para <span class="ButtonText">QuizMe</span>, cuando la aplicación se inicia, la aplicación debe elegir a la primera pregunta en la lista y mostrarla en el componente <span class="ButtonText">QuestionLabel</span>.
              </p>
              <p>
                Para este comportamiento de inicialización de aplicación, necesitas los siguientes bloques:
              </p>
              <div class="advtutorial">
                <table>
                  <tbody>
                    <tr>
                      <td class="tbl-header">
                        Tipo de bloque
                      </td>
                      <td class="tbl-header">
                        Cajón
                      </td>
                      <td class="tbl-header">
                        Propósito
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">Screen1.Initialize</span>
                      </td>
                      <td>
                        Screen1
                      </td>
                      <td>
                        Cuando aplicación comienza, este controlador de eventos se activa.
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">set QuestionLabel.Text to</span>
                      </td>
                      <td>
                        QuestionLabel
                      </td>
                      <td>
                        Necesario para poner la primera pregunta en <span class="ButtonText">QuestionLabel</span>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">select list item</span>
                      </td>
                      <td>
                        Lists
                      </td>
                      <td>
                        Necesario para seleccionar la primera pregunta de <span class="ButtonText">QuestionList</span>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">global QuestionList</span>
                      </td>
                      <td>
                        My Definitions
                      </td>
                      <td>
                        La lista para seleccionar
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">number</span> (1)
                      </td>
                      <td>
                        Math
                      </td>
                      <td>
                        Selecciona la primera pregunta con el índice 1
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <p>
                Los bloques deben tener el siguiente aspecto:
              </p>
              <div class="imagecontainer">
                <img alt="" border="0" src="QuizMeAssets/screenInit.png">
              </div>
              <h2>
                Como trabajan los bloques
              </h2>
              <p>
                El evento <span class="ButtonText">Screen1.Initialize</span> se activa cuando la aplicación se inicia. El primer elemento de la variable <span class="ButtonText">QuestionList</span> se selecciona y se coloca en <span class="ButtonText">QuestionLabel.Text</span>. Así que cuando la aplicación se inicia, el usuario verá la primera pregunta.
              </p>
              <blockquote class="testing">
                <strong>Prueba de este comportamiento.</strong> Haz clic en <span class="ButtonText">Restart Phone App</span> (o <span class="ButtonText">Connect Phone</span> si el teléfono no está conectado). ¿Que aparece en el teléfono? Si has creado QuestionList como se describía anteriormente, el primer elemento de QuestionList,"Who pitched a perfect game in the World Series?" (¿Quien lanzó un juego perfecto en las Series Mundiales?), Debería aparecer en la etiqueta QuestionLabel.
              </blockquote>
            </div>
            <h2>
              Pasando a traves de las preguntas
            </h2>Ahora programa el comportamiento de <span class="ButtonText">NextButton</span>. Ya has definido <span class="ButtonText">currentQuestionIndex</span> para recordar la pregunta en la que el usuario se encuentra. Cuando se pulsa <span class="ButtonText">NextButton</span>, la aplicación necesita incrementar esta variable, por ejemplo, cambiar de 1 a 2 o de 2 a 3, etc, y luego usar el valor resultante para seleccionar la nueva pregunta "actual". Para este comportamiento, necesitarás los siguientes bloques:
            <div class="advtutorial">
              <table>
                <tbody>
                  <tr>
                    <td class="tbl-header">
                      Tipo de bloque
                    </td>
                    <td class="tbl-header">
                      Cajón
                    </td>
                    <td class="tbl-header">
                      Propósito
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <span class="ButtonText">NextButton.Click</span>
                    </td>
                    <td>
                      NextButton
                    </td>
                    <td>
                      Cuando el usuario pulsa Next,este controlador de evnto es activado.
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <span class="ButtonText">set currentQuestionIndex to</span>
                    </td>
                    <td>
                      My Definitions
                    </td>
                    <td>
                      Necesario para colocar la primera pregunta en <span class="ButtonText">QuestionLabel</span>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Bloque <span class="ButtonText">+</span>
                    </td>
                    <td>
                      Math
                    </td>
                    <td>
                      Usado para incrementar <span class="ButtonText">currentQuestionIndex</span>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <span class="ButtonText">global currentQuestionIndex</span>
                    </td>
                    <td>
                      My Definitions
                    </td>
                    <td>
                      El nuevo valor será el viejo + 1
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <span class="ButtonText">number</span> (1)
                    </td>
                    <td>
                      Math
                    </td>
                    <td>
                      Para el + 1
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <span class="ButtonText">set QuestionLabel.Text to</span>
                    </td>
                    <td>
                      QuestionLabel
                    </td>
                    <td>
                      Necesario para mostrar la siguiente pregunta aquí
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <span class="ButtonText">select list item</span>
                    </td>
                    <td>
                      Lists
                    </td>
                    <td>
                      Necesario para seleccionar la primera pregunta de <span class="ButtonText">QuestionList</span>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <span class="ButtonText">global QuestionList</span>
                    </td>
                    <td>
                      My Definitions
                    </td>
                    <td>
                      Se coloca en la ranura <span class="ButtonText">list</span> de la llamada select list item
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <span class="ButtonText">global currentQuestionIndex</span>
                    </td>
                    <td>
                      My Definitions
                    </td>
                    <td>
                      Se coloca en la ranura <span class="ButtonText">index</span> de la llamada select list item, queremos el último elemento referido
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <p>
              Los bloques deben tener el siguiente aspecto:
            </p>
            <div class="imagecontainer">
              <img alt="" border="0" src="QuizMeAssets/firstNext.png">
            </div>
            <h2>
              Como trabajan los bloques
            </h2>
            <p>
              La primera fila de bloques incrementa la variable <span class="ButtonText">currentQuestionIndex</span>. Si <span class="ButtonText">currentQuestionIndex</span> tiene un 1 en el, es cambiado a 2. Si tiene un 2, es cambiado a 3, y así sucesivamente. Una vez que la variable <span class="ButtonText">currentQuestionIndex</span> ha cambiado, la aplicación se utiliza para seleccionar la pregunta <em>"</em>actual<em>"</em>.
            </p>
            <p>
              Recordemos que en el controlador de eventos <span class="ButtonText">Screen.Initialize</span>, la aplicación selecciona la primera pregunta para mostrar:
            </p>
            <div class="imagecontainer">
              <img alt="" border="0" src="QuizMeAssets/selectFirst.png">
            </div>
            <div class="c4">
              <p>
                Cuando se hace clic en <span class="ButtonText">NextButton</span>, la aplicación no elige el primer elemento de la lista, o el segundo o el tercero, elige el elemento referido en <span class="ButtonText">currentQuestionIndex</span><em class="c3"></em>.
              </p>
            </div>
            <div class="imagecontainer">
              <img alt="" src="QuizMeAssets/chooseCurrent.png">
            </div>
            <p>
              Los bloques se ejecutan de izquierda a derecha. La aplicación primero evalúa el parámetro <span class="ButtonText">index</span> de <span class="ButtonText">select list item</span>, el cual es la variable <span class="ButtonText">currentQuestionIndex</span>. El número almacenado en <span class="ButtonText">currentQuestionIndex</span> se utiliza como índice cuando el elemento de la lista de selección se ejecuta.
            </p>
            <p>
              Cuando se hace clic en <span class="ButtonText">NextButton</span> por primera vez, los bloques de incremento establecerán <span class="ButtonText">currentQuestionIndex</span> de 1 a 2, por lo que la aplicación selecciona el segundo elemento de <span class="ButtonText">QuestionList</span>, "who pitched the first perfect game of 2010?". La segunda vez que se hace clic en <span class="ButtonText">NextButton</span>, <span class="ButtonText">currentQuestionIndex</span> se cambia de 2 a 3, y la aplicación selecciona la 3ª pregunta en la lista, "who pitched the first perfect game of the modern era?"
            </p>
            <blockquote class="testing">
              <p>
                <strong>Prueba de este comportamiento.</strong> Prueba el comportamiento de <span class="ButtonText">NextButton</span> para ver si la aplicación está trabajando correctamente hasta ahora. Para probarlo,  toma el papel del usuario y haz clic en NextButton en el teléfono. ¿Muestra la pantalla del teléfono a la segunda pregunta?,"Who pitched the first perfect game of 2010?" Debería, y la tercera pregunta debe aparecer cuando haces clic en <span class="ButtonText">NextButton</span> de nuevo.  Si esto funciona, date una palmada en la espalda rápidamente, y luego sige adelante.
              </p>
              <p>
                Intenta hacer clic en <span class="ButtonText">NextButton</span> de nuevo (una tercera vez). Debes ver un error: "Attempting to get item 4 of a list of length 3"(Intento de obtener el punto 4 de una lista de longitud de 3). La aplicación tiene un error - ¿Sabes cuál es el problema?
              </p>
            </blockquote>
            <p>
              El problema con la aplicación es que <em>siempre</em> incrementa la variable <span class="ButtonText">currentQuestionIndex</span> cuando <span class="ButtonText">NextButton</span> se pulsa. Cuando <span class="ButtonText">currentQuestionIndex</span> ya está en 3 y el usuario hace clic en NextButton, la aplicación cambia <span class="ButtonText">currentQuestionIndex</span> de 3 a 4, llama al elemento de la lista de selección para obtener el <span class="ButtonText">currentQuestionIndex</span><em class="c3"></em>, o en este caso, el elemento cuarto. Dado que sólo hay tres elementos <span class="ButtonText">QuestionList</span>, Android se queja.
            </p>
            <p>
              Lo que la aplicación tiene que hacer es hacer una pregunta - comprobar una condición - cuando <span class="ButtonText">NextButton</span> se pulsa, y ejecuta diferentes bloques dependendiendo de la respuesta. Una manera de hacer la pregunta es preguntar, "¿Es la variable <span class="ButtonText">currentQuestionIndex</span> actualmente en 3?" Si la respuesta es si, Debes ajustar <span class="ButtonText">currentQuestionIndex</span> de nuevo a 0 por lo que el usuario es llevado de nuevo a la primera pregunta.
            </p>
            <p>
              Necesitarás los siguientes bloques:
            </p>
            <div class="advtutorial">
              <table>
                <tbody>
                  <tr>
                    <td class="tbl-header">
                      Tipo de bloque
                    </td>
                    <td class="tbl-header">
                      Cajón
                    </td>
                    <td class="tbl-header">
                      Propósito
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <span class="ButtonText">if test then-do</span>
                    </td>
                    <td>
                      Control
                    </td>
                    <td>
                      Para preguntar si el usuario está en la última pregunta
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <span class="ButtonText">=</span> block
                    </td>
                    <td>
                      Math
                    </td>
                    <td>
                      Para probar si <span class="ButtonText">currentQuestionIndex</span> es 3
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <span class="ButtonText">global currentQuestionIndex</span>
                    </td>
                    <td>
                      My Definitions
                    </td>
                    <td>
                       
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <span class="ButtonText">number</span> 3
                    </td>
                    <td>
                      Math
                    </td>
                    <td>
                      3 es el número de elementos en la lista
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <span class="ButtonText">set currentQuestionIndex to</span>
                    </td>
                    <td>
                      My Definitions
                    </td>
                    <td>
                      Ajustar a 0 para volver a la primera pregunta
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <span class="ButtonText">number</span> (0)
                    </td>
                    <td>
                      Math
                    </td>
                    <td>
                      Establece en 0, porque los próximos bloques se incrementarán en 1
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <p>
              El controlador de eventos NextButton.Click modificado debe tener este aspecto:
            </p>
            <div class="imagecontainer">
              <img alt="" border="0" src="QuizMeAssets/nextif3.png">
            </div>
            <h2>
              Como trabajan los bloques
            </h2>
            <p>
              Cuando se hace clic en <span class="ButtonText">NextButton</span>, la aplicación primero comprueba si <span class="ButtonText">currentQuestionIndex</span> tiene un 3 en el mismo. Si es así <span class="ButtonText">currentQuestionIndex</span> se devuelve de nuevo a 0  para que cuando se agrege 1 a él con los bloques de abajo, sea 1 y la aplicación muestre de nuevo la primera pregunta.  Ten en cuenta que sólo los bloques insertados en <span class="ButtonText">if-test-then-do</span> dependen de la condición-- los bloques incremento y <span class="ButtonText">set QuestionLabel.Text to</span> se ejecutan en todas las condiciones.
            </p>
            <blockquote class="testing">
              <strong>Prueba este comportamiento</strong>. Dado que las variables como currentQuestionIndex están ocultas, son a menudo la fuente de errores en un programa. Afortunadamente, App Inventor ofrece una manera de hacer esas variables ocultas transparentes durante la prueba. En concreto, App Inventor te permite "ver" cómo el valor de una variable cambia según progresa la aplicación. Para esta prueba, haga clic derecho en el bloque de definición currentQuestionIndex en el Editor de bloques y elige <em>Watch</em>. A continuación, elige <span class="ButtonText">Restart Phone App</span> A continuación, en el bloque de definición aparecerá una caja que muestra el valor inicial de currentQuestionIndex (1):
              <div class="imagecontainer">
                <img alt="" src="QuizMeAssets/watchindex1.png">
              </div>
              <p>
                Ahora coge el teléfono y haga clic en el NextButon. La segunda pregunta, "who pitched the most recent perfect game in the major leagues?" (¿Quien lanzó el juego perfecto más reciente en las Grandes Ligas?) debe aparecer en QuestionLabel en el teléfono, como antes. En la pantalla de App Inventor, 2 debería aparecer en la celda de memoria de currentQuestionIndex:
              </p>
              <div class="imagecontainer">
                <img alt="" src="QuizMeAssets/watchindex2.png">
              </div>
              <p>
                Al hacer clic una vez más, la tercera pregunta debe aparecer en el teléfono y 3 debe aparecer en la celda de memoria. Si haces clic de nuevo, 1 debería aparecer en currentQuestionIndex y la primera pregunta en el teléfono.
              </p>
            </blockquote>
            <h2>
              Una aplicación sustentable: Hacer que sea fácil modificar las preguntas
            </h2>
            <p>
              A continuación, se va a modificar la aplicación para que sea fácil añadir y eliminar elementos de la lista. Vas a reescribir los bloques para que trabajen en cualquier lista, no sólo en una con exactamente tres elementos. Para comenzar, agrega una cuarta pregunta a <span class="ButtonText">QuestionList</span> y otra respuesta en <span class="ButtonText">AnswerList</span>. Los bloques deben tener el siguiente aspecto:
            </p>
            <div class="imagecontainer">
              <img alt="" height="325" src="QuizMeAssets/listsWith4.png" width="667">
            </div>
            <blockquote class="testing">
              <strong>Prueba la aplicación modificada</strong>. Haz clic en <span class="ButtonText">NextButton</span> un número de veces. Debes ver que no aparece la cuarta pregunta, no importa cuántas veces hagas clic en <span class="ButtonText">Next</span>.
            </blockquote>
            <p>
              El problema es que la prueba para ver si el usuario está en la última pregunta es muy concreta: se le pregunta si la variable <span class="ButtonText">currentQuestionIndex</span> es 3:
            </p>
            <div class="imagecontainer">
              <img alt="" border="0" src="QuizMeAssets/if3.png">
            </div>
            <p>
              Puedes sólo cambiar el número 3 a 4, y la aplicación volverá a funcionar correctamente. El problema con esta solución, sin embargo, es que cada vez que modifiques las preguntas y respuestas, también tienes que acordarte de hacer este cambio. Estas dependencias en un programa de computadora a menudo conducen a errores, especialmente cuando una aplicación crece en complejidad. Es mucho mejor establecer el programa de modo que trabaje, sin importar cuántas preguntas haya. Tal generalidad es aún más importante cuando la lista está trabajando con cambios de forma dinámica, por ejemplo, una aplicación de prueba que permite al usuario añadir nuevas preguntas.
            </p>
            <p>
              La mejor solución es hacer la pregunta de una manera más general. Realmente quieres saber si la pregunta en la que se encuntra el usuario está-- el valor de <span class="ButtonText">currentQuestionIndex</span>-- es tan largo como el número de elementos en <span class="ButtonText">QuestionList</span>. Si la aplicación hace la pregunta de un modo más general, funcionará incluso cuando agreges o quites elementos de QuestionList. Para modificar el controlador de eventos <span class="ButtonText">NextButton.Click</span> vas a sustituir la comprobación anterior que se refería directamente a 3. Necesitarás los siguientes bloques:
            </p>
            <div class="advtutorial">
              <table>
                <tbody>
                  <tr>
                    <td class="tbl-header">
                      <strong>Tipo de bloque</strong>
                    </td>
                    <td class="tbl-header">
                      <strong>Cajón</strong>
                    </td>
                    <td class="tbl-header">
                      <strong>Propósito</strong>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <span class="ButtonText">length of list</span>
                    </td>
                    <td>
                      Lists
                    </td>
                    <td>
                      Comprueba el número de elementos en <span class="ButtonText">QuestionList</span>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <span class="ButtonText">global QuestionList</span>
                    </td>
                    <td>
                      My Definitions
                    </td>
                    <td>
                      Se coloca en la ranura list de <span class="ButtonText">length of list</span>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <p>
              Tu controlador de eventos <span class="ButtonText">NextButton.Click</span> debe aparecer ahora así:
            </p>
            <div class="imagecontainer">
              <img alt="" src="QuizMeAssets/nextWithLength.png">
            </div>
            <h2>
              Como trabajan los bloques
            </h2>
            <p>
              La prueba <span class="ButtonText">if</span> ahora compara <span class="ButtonText">currentQuestionIndex</span> con la longitud de <span class="ButtonText">QuestionList</span>. Así, si <span class="ButtonText">currentQuestionIndex</span> tiene un 4 en el, y la longitud de <span class="ButtonText">QuestionList</span> es 4, entonces <span class="ButtonText">currentQuestionIndex</span> se pone a 0 (y luego a 1 después de la operación de incremento en la primera fila de bloques después de if). Ten en cuenta que, debido a que los bloques no se refieren a tres o ni a ningun tamaño específico, el comportamiento funcionará sin importar cuántos elementos hay en la lista.
            </p>
            <blockquote class="testing">
              <strong>Pon a prueba el comportamiento modificado.</strong> Cuando haces clic en el nextButton, realiza la aplicación ahora la secuencia a través de las cuatro preguntas, ¿pasa a la primera después de la cuarta?
            </blockquote>
            <h2>
              Cambio de la imagen para cada pregunta
            </h2>
            <p>
              La aplicación actual muestra siempre la misma imagen, no importa la pregunta que se le pida. Puedes cambiar esto para que la imagen corresponda a la pregunta que aparece cuando se hace clic en <span class="ButtonText">NextButton</span>. Anteriormente, has agregado cuatro imágenes en los medios para el proyecto. Ahora, vamos a crear una tercera lista, <span class="ButtonText">PictureList</span>, con los nombres de los archivos de imagen como sus elementos y modificar el controlador de eventos <span class="ButtonText">NextButton.Click</span> para cambiar la imagen cada vez.
            </p>
            <p>
              En primer lugar, crea una <span class="ButtonText">PictureList</span> y inicializala con los nombres de los archivos de imagen. Asegúrate de que los nombres son exactamente los mismos que los nombres de los archivos que se cargaron en los medios del proyecto. Así es como los bloques de <span class="ButtonText">PictureList</span> deben quedar:
            </p>
            <div class="imagecontainer">
              <img alt="" src="QuizMeAssets/pictureList.png">
            </div>
            <p>
              A continuación, debes modificar el controlador de eventos <span class="ButtonText">NextButton.Click</span> para que se modifique la imagen en función de la pregunta que el usuario esté en ese momento. Si se establece la propiedad <span class="ButtonText">Image.Picture</span> a el nombre de un archivo de imagen que se ha cargado, esa imagen aparecerá. Para modificar <span class="ButtonText">NextButton.Click</span>, necesitarás los siguientes bloques:
            </p>
            <div class="advtutorial">
              <table>
                <tbody>
                  <tr>
                    <td class="tbl-header c5">
                      <strong>Tipo de bloque</strong>
                    </td>
                    <td class="tbl-header c6">
                      <strong>Cajón</strong>
                    </td>
                    <td class="tbl-header c7">
                      <strong>Propósito</strong>
                    </td>
                  </tr>
                  <tr>
                    <td class="c5">
                      <span class="ButtonText">set Image1.Picture to</span>
                    </td>
                    <td class="c6">
                      Image1
                    </td>
                    <td class="c7">
                      establece esta para cambiar la imagen
                    </td>
                  </tr>
                  <tr>
                    <td class="c8">
                      <span class="ButtonText">select list item</span>
                    </td>
                    <td class="c9">
                      Lists
                    </td>
                    <td class="c10">
                      necesaria para seleccionar la imagen correspondiente a la pregunta actual
                    </td>
                  </tr>
                  <tr>
                    <td class="c8">
                      <span class="ButtonText">global PictureList</span>
                    </td>
                    <td class="c9">
                      My Definitions
                    </td>
                    <td class="c10">
                      seleciona un nombre de archivo de esta lista
                    </td>
                  </tr>
                  <tr>
                    <td class="c8">
                      <span class="ButtonText">global currentQuestionIndex</span>
                    </td>
                    <td class="c9">
                      My Definitions
                    </td>
                    <td class="c10">
                      seleciona el elemento indicado de <span class="ButtonText">currentQuestionIndex</span><em></em>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <p>
              Los bloques deben tener este aspecto:
            </p>
            <div class="imagecontainer">
              <img alt="" src="QuizMeAssets/nextWithImageSwitch.png">
            </div>
            <h2>
              Como trabajan los bloques
            </h2>
            <p>
               <span class="ButtonText">CurrentQuestionIndex</span> sirve de índice para <span class="ButtonText">QuestionList</span> y <span class="ButtonText">PictureList</span>. Cuando <span class="ButtonText">currentQuestionIndex</span> es 1, la aplicación selecciona la primera pregunta y la primera imagen. Cuando <span class="ButtonText">currentQuestionIndex</span> es 2, la aplicación selecciona la segunda pregunta y la segunda imagen. este sistema depende de las listas que están sincronizadas como en efecto están.ía y indeed they are. Por ejemplo, la primera foto, <span class="ButtonText">LarsenBerra.jpg</span> es una imagen de Don Larsen, y Don Larsen es la respuesta a la primera pregunta, "¿Quién lanzó un juego perfecto en la Serie Mundial?" Pon a prueba el comportamiento modificado. ¿Aparece una imagen diferente cada vez que haces clic en nextButton?
            </p>
            <h2>
              La evaluación de las respuestas
            </h2>
            <p>
              A continuación, vamos a añadir bloques que informan de si el usuario ha respondido a una pregunta correctamente o no. El usuario introduce la respuesta en <span class="ButtonText">AnswerText</span> y luego hace clic en <span class="ButtonText">AnswerButton</span>. La aplicación debe comparar la entrada del usuario con la respuesta a la pregunta "actual", utilizando un bloque <span class="ButtonText">ifelse</span> para comprobarlo. La etiqueta <span class="ButtonText">RightWrongLabel</span> debe ser modificada para informar si la respuesta es correcta o no. Necesitarás los siguientes bloques para este comportamiento:
            </p>
            <div class="advtutorial">
              <table border="1">
                <tbody>
                  <tr>
                    <td class="tbl-header c5">
                      <strong>Tipo de bloque</strong>
                    </td>
                    <td class="tbl-header c6">
                      <strong>Cajón</strong>
                    </td>
                    <td class="tbl-header c7">
                       <strong>Propósito</strong>
                    </td>
                  </tr>
                  <tr>
                    <td class="c5">
                      <span class="ButtonText">AnswerButton.Click</span>
                    </td>
                    <td class="c6">
                      AnswerButton
                    </td>
                    <td class="c7">
                      el comportamiento se activa cuando el usuario hace clic en <span class="ButtonText">AnswerButton</span>
                    </td>
                  </tr>
                  <tr>
                    <td class="c8">
                      <span class="ButtonText">ifelse</span>
                    </td>
                    <td class="c9">
                      Control
                    </td>
                    <td class="c10">
                      si la respuesta es correcta, hace una cosa, si no hace otra cosa
                    </td>
                  </tr>
                  <tr>
                    <td class="c8">
                      <span class="ButtonText">=</span> block
                    </td>
                    <td class="c9">
                      Math
                    </td>
                    <td class="c10">
                      para preguntar si es la respuesta correcta
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <span class="ButtonText">AnswerText.Text</span>
                    </td>
                    <td>
                      AnswerText
                    </td>
                    <td>
                      la respuesta del usuario se encuentra en esta caja de texto
                    </td>
                  </tr>
                  <tr>
                    <td class="c8">
                      <span class="ButtonText">select list item</span>
                    </td>
                    <td class="c9">
                      Lists
                    </td>
                    <td class="c10">
                      para seleccionar la respuesta actual de <span class="ButtonText">AnswerList</span>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <span class="ButtonText">global AnswerList</span>
                    </td>
                    <td>
                      My Definitions
                    </td>
                    <td>
                      La lista de la que seleccionar
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <span class="ButtonText">global currentQuestionIndex</span>
                    </td>
                    <td>
                      My Definitions
                    </td>
                    <td>
                      el número de la pregunta (y el número de respuesta) en que el usuario está
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <span class="ButtonText">set RightWrongLabel.Text to</span>
                    </td>
                    <td>
                      RightWrongLabel
                    </td>
                    <td>
                      informar sobre la respuesta aquí
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <span class="ButtonText">text</span> "correct"
                    </td>
                    <td>
                      Text
                    </td>
                    <td>
                      si la respuesta es correcta
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <span class="ButtonText">set RightWrongLabel.Text to</span>
                    </td>
                    <td>
                      RightWrongLabel
                    </td>
                    <td>
                      informar sobre la respuesta aquí
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <span class="ButtonText">text</span> "incorrect"
                    </td>
                    <td>
                      Text
                    </td>
                    <td>
                      si la respuesta es incorrecta
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <p>
              Los bloques deben tener el siguiente aspecto:
            </p>
            <div class="imagecontainer">
              <img alt="" src="QuizMeAssets/answerButton.png">
            </div>
            <h2>
              <strong>Como trabajan los bloques</strong>
            </h2>
            <p>
              La prueba <span class="ButtonText">ifelse</span> comprueba , "es la respuesta del usuario <span class="ButtonText">(AnswerText.Text)</span> igual al elemento <span class="ButtonText">currentQuestionIndex</span><em class="c3">h</em> correspondiente en <span class="ButtonText">AnswerList</span>?" Si <span class="ButtonText">currentQuestionIndex</span> es 1, la aplicación compara la respuesta del usuario con el primer elemento de AnswerList, "Don Larsen". Si <span class="ButtonText">currentQuestionIndex</span> es 2, la aplicación compara la respuesta del usuario con la segunda respuesta en la lista, "Dallas Braden", y así sucesivamente. Si el resultado es positivo, los bloques <span class="ButtonText">then-do</span> se ejecutan y <span class="ButtonText">RightWrongLabel</span> se ajusta a "correcto!". Si la prueba es negativa, los bloques else-do blocks se ejecutan y RightWrongLabel se ajusta a "incorrecto".
            </p>
            <div class="c12">
              <div class="c4"></div>
              <blockquote class="testing">
                <p>
                  Prueba la aplicación modificada. Trata de responder a una de las preguntas. Debe informar has respondido a la pregunta tal y como se especifica en <span class="ButtonText">AnswerList</span>. Ponla a prueba tanto con una respuesta correcta como incorrecta (como el texto se compara, la prueba distingue entre mayúsculas y minúsculas).
                </p>
                <p>
                  Haz clic en <span class="ButtonText">NextButton</span> y responde a una segunda pregunta. ¿Todavía funciona? Debe, pero es posible que notes que cuando haces clic en <span class="ButtonText">NextButton</span>, el texto "correct"../../../"incorrect" y la respuesta anterior todavía están ahí. Aunque es bastante inocuo, tales cuestiones de la interfaz de usuario sin duda serán observadas por los usuarios de tu aplicación.
                </p>
              </blockquote>
              <p>
                Para dejar en blanco <span class="ButtonText">RightWrongLabel</span> y <span class="ButtonText">AnswerText,</span> vas a poner los siguientes bloques dentro del controlador de eventos NextButton.click:
              </p>
              <div class="advtutorial">
                <table border="1">
                  <tbody>
                    <tr>
                      <td class="tbl-header c5">
                        <strong>Tipo de bloque</strong>
                      </td>
                      <td class="tbl-header c6">
                        <strong>Cajón</strong>
                      </td>
                      <td class="tbl-header c7">
                         <strong>Propósito</strong>
                      </td>
                    </tr>
                    <tr>
                      <td class="c5">
                        <span class="ButtonText">set RightWrongLabel.Text to</span>
                      </td>
                      <td class="c6">
                        RightWrongLabel
                      </td>
                      <td class="c7">
                        La etiqueta para dejar en blanco
                      </td>
                    </tr>
                    <tr>
                      <td class="c8">
                        <span class="ButtonText">text</span> (blank)
                      </td>
                      <td class="c9">
                        Text
                      </td>
                      <td class="c10">
                        Cuando se hace clic en Siguiente, borra la evaluación a la respuesta anterior
                      </td>
                    </tr>
                    <tr>
                      <td class="c8">
                        <span class="ButtonText">set AnswerText.Text to</span>
                      </td>
                      <td class="c9">
                        AnswerText
                      </td>
                      <td class="c10">
                        La respuesta del usuario para la pregunta anterior
                      </td>
                    </tr>
                    <tr>
                      <td class="c8">
                        <span class="ButtonText">text</span> (blank)
                      </td>
                      <td class="c9">
                        Text
                      </td>
                      <td class="c10">
                        Cuando se hace clic en Siguiente, borra la respuesta anterior
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <p>
                Los bloques deben tener el siguiente aspecto:
              </p>
              <div class="imagecontainer">
                <img alt="" src="QuizMeAssets/nextButtonFinal.png">
              </div>
              <h2>
                Como trabajan los bloques
              </h2>Cuando se hace clic en <span class="ButtonText">NextButton</span> el usuario se mueve a la siguiente pregunta, por lo que las dos primeras filas del controlador de eventos borran <span class="ButtonText">RightWrongLabel</span> y <span class="ButtonText">AnswerText.</span>
              <blockquote class="testing">
                <p>
                  Prueba de este comportamiento. Responde la pregunta y haz clic en <span class="ButtonText">Submit</span>, a continuación, haz clic en <span class="ButtonText">NextButton</span>. ¿Tu respuesta anterior y la evaluación de la aplicacion desaparecen?
                </p>
              </blockquote>
              <h2>
                Programa Final
              </h2><strong>QuizMe! Versión Final</strong>
              <div class="imagecontainer">
                <img alt="" border="0" height="626" src="QuizMeAssets/quizmeFinal.png" width="900">
              </div>
              <p>
                Empaqueta la versión final de la aplicación eligiendo <span class="ButtonText">Package For Phone | Barcode</span> en el menú del <span class="ButtonText">Component Designer</span>. Cuando aparezca el código de barras, utiliza el escáner de código de barras de tu teléfono para descargar e instalar la aplicación.
              </p>
              <h2>
                Variaciones
              </h2>
              <p>
                Una vez que consigas una quiz funcinando, es posible que desees explorar algunas variaciones. Por ejemplo,
              </p>
              <ul>
                <li>En lugar de simplemente mostrar imágenes para cada pregunta, intenta reproducir un clip de sonido o un vídeo de corta duración. Con el sonido, puedes convertir tu aplicación en una aplicación <em>Adivina esta canción</em>.
                </li>
                <li>La prueba es muy rígida en términos de lo que es aceptado como una respuesta válida. Hay distintas formas de modificar esto. Una de ellas es utilizar el bloque <span class="ButtonText">text.contains</span> para ver si la respuesta del usuario está dentro de la respuesta actual. Otra es la de proporcionar respuestas múltiples para cada pregunta, y comprobar por iteración (<span class="ButtonText">foreach</span>) a través de ellas para ver si algúna coincide.
                </li>
                <li>Transforma la prueba para que sea de opción múltiple. La lista de respuestas tendrá que ser una lista de listas, y cada sub-lista mantendrá las opciones de respuesta. Usa el componente <span class="ButtonText">ListPicker</span> para permitir al usuario elegir una respuesta.
                </li>
              </ul>
              <h2>
                Revisión
              </h2>Estas son algunas de las ideas que se tratan en este tutorial:
              <ul>
                <li>Las aplicaciones pueden ser escritas de un modo general para que funcionen con cualquier lista de datos.
                </li>
                <li>Las variables de indice se utilizan para realizar un seguimiento de la posición actual dentro de una lista . Cuando las incrementes, ten cuidado con llegar a la final de la lista.
                </li>
              </ul>
              <blockquote class="notice">
                Google agadece al <a href="http://www.appinventor.org/">Profesor David Wolber</a>, Profesor de Ciencias de la computación en La Universidad de San Francisco, por el desarrollo de este tutorial.
              </blockquote>
            </div>
          </div>
        </div>
        <div class="footer">
          <div class="footer-legal">
            <p>
              <a href="http://creativecommons.org/licenses/by-nc/3.0/es/" rel="license"><img alt="Creative Commons License" class="c2" src="http://i.creativecommons.org/l/by-nc/3.0/88x31.png"></a><br>
              Este trabajo está bajo una licencia <a href="http://creativecommons.org/licenses/by-nc/3.0/es/" rel="license">Creative Commons Attribution-NonCommercial 3.0 Unported License</a>.
            </p>
            <p>
              El trabajo original de Google ha sido modificado<br>
              El trabajo modificado fue traducido del Inglés al Español<br> 
              <a href="../../../about/index.html">Acerca de</a> | <a href="../../../about/privacy.html">Privacidad</a> | <a href="../../../about/termsofservice.html">Condiciones</a>
            </p>
          </div>
          <div class="footer-lastupdate">
            <script type="text/javascript">
if (document.lastModified != '') {
                var m = "Page last updated: " + document.lastModified;
                var p = m.length-8;
                document.writeln("<center>");
                document.write(m.substring(p, 0));
                document.writeln("<\/center>");
              }
            </script>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

